<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>填写信息</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <script src="/jslib/template-web.js"></script>
    <style>
        .bottom {
            background-color: #F5F5F5;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            align-items: center;
            display: flex;
            padding: 10px 4px;
        }

        .btn {
            height: 40px;
            line-height: 40px;
        }
    </style>
</head>

<body ontouchstart>
    <div id="fillin">

    </div>
    <div class="bottom">
        <div style="flex:1;text-align:right;">
            <a href="javascript:;" class="btn weui-btn weui-btn_mini weui-btn_primary bg-orange tijiao"></i>完成</a>
        </div>
    </div>
    <div id="half" class='weui-popup__container popup-bottom'>
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="toolbar">
                <div class="toolbar-inner">
                    <a href="javascript:;" class="picker-button close-popup">关闭</a>
                    <h1 class="title">选择物流公司</h1>
                </div>
            </div>
            <div class="modal-content">
                <div class="weui-panel__bd" id="companylist">

                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script type="text/template" id="fillintemp">
    <div class="weui-panel__bd">
            <div class="weui-media-box weui-media-box_text">
                <h4 class="weui-media-box__title">{{shoplogistics.Name}} | {{shoplogistics.Telephone}}</h4>
                <p class="weui-media-box__desc">{{shoplogistics.Province}}{{shoplogistics.City}}{{shoplogistics.Area}}{{shoplogistics.Address}}</p>
            </div>
        </div>
        <div style="height: 10px;background-color:#F5F5F5;"></div>
        <div class="weui-cells">
            <a class="weui-cell weui-cell_access selcompany" href="javascript:;">
                <div class="weui-cell__bd">
                    <p>物流公司</p>
                </div>
                <div class="weui-cell__ft">{{logisticsComname||"请选择"}}
                </div>
            </a>
            <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__bd">
                    <p>快递单号</p>
                </div>
                <div class="weui-cell__ft">
                    <input class="weui-input" id="LogisticsNoipt" placeholder="请输入快递单号" type="text" value="{{LogisticsNo}}">
                </div>
            </a>
        </div>
</script>
<script type="text/template" id="logisticstemp">
    <div class="weui-cells">
        {{each list item}}
        <a class="weui-cell weui-cell_access company" data-item="{{item}}" href="javascript:;">
            <div class="weui-cell__bd">
                <p>{{item.Name}}</p>
            </div>
            <div class="weui-cell__ft">
            </div>
        </a>
        {{/each}}
    </div>
</script>
<script>

    lobsterh5.main({
        data: {
            shoplogistics: {},
            refundNo: '',
            logisticsCom: [],
            logisticsComIndex: 0,
            logisticsComname: '',
            LogisticsNo: ''
        },
        //初始化页面
        pageload: function () {
            var self = this;
            self.initevent();
            self.data.refundNo = lobsterh5.GetUrlParam("refundNo");
            Promise.all([self.getShopInfo(), self.getDic(8142)]).then(res => {
                self.data.shoplogistics = res[0].shoplogistics;
                self.data.logisticsCom = res[1].appbasedict;
                var html = template("logisticstemp", { list: self.data.logisticsCom });
                $("#companylist").html(html);
                var html = template("fillintemp", { shoplogistics: self.data.shoplogistics, logisticsComname: self.data.logisticsComname, LogisticsNo: self.data.LogisticsNo });
                $("#fillin").html(html);
            }).catch(res => {
                console.log(res.msg);
            })
        },
        //初始化事件
        initevent: function () {
            var self = this;
            $("#fillin").on("click",".selcompany",function () {
                $("#half").popup();//打开 
            })
            $("#companylist").on("click", ".company", function () {
                self.data.logisticsComname = $(this).data("item").Name;
                var html = template("fillintemp", { shoplogistics: self.data.shoplogistics, logisticsComname: self.data.logisticsComname, LogisticsNo: self.data.LogisticsNo });
                $("#fillin").html(html);
                $.closePopup();
            })
            $("#fillin").on("input", "#LogisticsNoipt", function () {
                self.data.LogisticsNo = $(this).val();
            })
            $(".tijiao").click(function () {
                if (!self.data.logisticsComname) {
                    $.toast('请选择物流公司', 'text');
                    return;
                }
                if (!self.data.LogisticsNo) {
                    $.toast('请填写物流单号', 'text');
                    return;
                }
                lobsterh5.POST("/lowcode/APP20200616102057595/shop/?fun=mall.ConfirmSendBack", {
                    RefundNo: self.data.refundNo,
                    LogisticsNo: self.data.LogisticsNo,
                    LogisticsCompany: self.data.logisticsComname
                }).then(res => {
                    location.href = "list.html";
                }).catch(res => {
                    $.toast(res.msg, 'forbidden');
                }) 
            })
        },
        //获取支付类型字典
        getDic: function (classId) {
            return new Promise((resolve, reject) => {
                lobsterh5.GET("/common/v1/BasicData/GetAppBaseDict", {
                    classId: classId,
                    appKey: "APP20200616102057595"
                }).then(res => {
                    resolve(res);
                }).catch(res => {
                    reject(res);
                });
            })
        },
        getShopInfo: function () {
            return new Promise((resolve, reject) => {
                lobsterh5.GET("/lowcode/APP20200616102057595/shop/?fun=mall.getShopInfo", {
                    shopId: 1
                }).then(res => {
                    resolve(res);
                }).catch(res => {
                    reject(res);
                });
            })
        }
    })
</script>